<template>
  <div class="login-container">
    <n-form label-placement="left">
      <img src="../../assets/logo.png" />
      <n-form-item>
        <n-input
          v-model:value="loginForm.username"
          placeholder="请输入账号"
        ></n-input>
      </n-form-item>
      <n-form-item>
        <n-input
          v-model:value="loginForm.password"
          placeholder="请输入密码"
        ></n-input>
      </n-form-item>
      <div class="action-area">
        <n-button type="primary" :loading="isLogin" @click="handleLogin"
          >登录</n-button
        >
        <n-button type="default">注册</n-button>
      </div>
    </n-form>
  </div>
</template>
<script lang="ts">
import { Ref, ref, defineComponent, getCurrentInstance } from "vue";
import { Router, useRouter } from "vue-router";
import { USER_LOGIN_REQ_MODEL } from "../../apis/user_model";
import { UserActionTypes } from "../../store/modules/user/types";
import { useStore } from "../../store/index";
import { mapActions } from "vuex";
export default defineComponent({
  setup() {
    const router: Router = useRouter();
    let loginForm: Ref<USER_LOGIN_REQ_MODEL> = ref({
      username: "ADMIN",
      password: "1",
    });
    let isLogin: Ref<Boolean> = ref(false);
    const handleLogin = () => {
      isLogin.value = true;
      useStore()
        .dispatch(UserActionTypes.USER_LOGIN, loginForm.value)
        .then((res) => {
          router.push({ path: "/main" });
        })
        .finally(() => {
          isLogin.value = false;
        });
    };

    return {
      loginForm,
      handleLogin,
      isLogin,
      router,
    };
  },
});
</script>
<style lang="sass" scoped>
@import "./index.scss"
</style>